<template>
    <div id="app">

                <div style="height: 300px">
                    <lz-multiple-selector
                       action="http://localhost:7001/center/pc/serve/goods/category/getList"
                       :replaceFields="{
                            title:'cateName,cateCode',
                            description:'createTime'
                       }"
                       v-model="ms"
                       :show-description="false"
                       @change="msChange"
                    />
                </div>
        <!--                <lz-video url="path" :data-list="videoDataList"></lz-video>-->
        <!--                <lz-upload-->
        <!--                        v-model="uploadList"-->
        <!--                        :max-num="5"-->
        <!--                        :size="1"-->
        <!--                        @change="uploadChange"-->
        <!--                        accept=".jpg,.png,.xlsx"-->
        <!--                        :disabled="false"-->
        <!--                        imgBasePath="https://echftp.yqzhfw.com/"-->
        <!--                        action='http://localhost:8102/base/common/upload/image'-->
        <!--                        :replaceFields="{-->
        <!--                            name: 'name',-->
        <!--                            path: 'path',-->
        <!--                            original: 'original',-->
        <!--                            size: 'size',-->
        <!--                            suffix: 'suffix',-->
        <!--                        }"-->
        <!--                />-->
        <!--        <a-button icon="profile" style="margin-right: 10px;">导入记录</a-button>-->
        <!--                <lz-upload-tools-->
        <!--                        @beforeUpload="beforeUpload"-->
        <!--                        @doneUpload="doneUpload"-->
        <!--                        label="导入"-->
        <!--                        :size="1"-->
        <!--                        accept=".xlsx,.xls"-->
        <!--                        action='http://localhost:8102/base/common/upload/image'-->
        <!--                />-->

        <!--        <lz-text color='error' :value='formData.ttt'></lz-text>-->
        <!--        <lz-text :value="lztext" color="primary" @click="textClick"></lz-text>-->

        <!--                         :asyncLoad="asyncLoad"
        -->
        <!-- :asyncLoad="asyncLoad" -->
<!--        <lz-tree-select-->
<!--                ref="lzTreeSelect"-->
<!--                :replaceFields="{-->
<!--                        key: 'id',-->
<!--                        value: 'id',-->
<!--                        title: 'cateName',-->
<!--                        children: 'children'-->
<!--                    }"-->
<!--                v-model="treeSelect"-->
<!--                @change="lzTreeSelectChange"-->
<!--                :multiple="true"-->
<!--                :asyncLoad="asyncLoad"-->
<!--        />-->
        <!--        <lz-tree ref="lzTree"-->
        <!--                 :replaceFields="{-->
        <!--                        key: 'id',-->
        <!--                        title: 'cateName',-->
        <!--                        children: 'children'-->
        <!--                    }"-->
        <!--                 :asyncLoad="asyncLoad"-->
        <!--                 @click="nodeClick">-->

        <!--        </lz-tree>-->
        <!--                                   <lz-search ref="searchBar" :items="items" @search="search"></lz-search>-->
        <!--                        <a-button @click="getSearchValues">获取搜索参数</a-button>-->
        <!--表格-->
        <!--                        <lz-table ref="myTable">-->
        <!--                            <div slot="tools">-->
        <!--                                <a-button icon="plus" @click="getSelect" type="primary">测试</a-button>-->
        <!--                                <a-button icon="plus" style="margin-left: 10px;">测试</a-button>-->
        <!--                                <lz-upload-tools-->
        <!--                                        style="margin-left: 10px;"-->
        <!--                                                    @beforeUpload="beforeUpload"-->
        <!--                                                    @doneUpload="doneUpload"-->
        <!--                                                    label="导入"-->
        <!--                                                    :size="1"-->
        <!--                                                    accept=".xlsx,.xls"-->
        <!--                                                    action='http://localhost:8102/base/common/upload/image'-->
        <!--                                            />-->
        <!--                            </div>-->
        <!--                        </lz-table>-->

        <!--        <lz-image url="path" :data-list="dataList"></lz-image>-->
        <!--        <test/>-->
        <!--        <lz-time-picker v-model="timePicker" @change="change"></lz-time-picker>-->
        <!--        <lz-date-picker-->
        <!--                v-model="datePicker"-->
        <!--                :show-time="{-->
        <!--                    format: 'HH:mm'-->
        <!--                }"-->
        <!--                :show-today="false"-->
        <!--                @change="dateChange"-->
        <!--        ></lz-date-picker>-->
        <!--        <lz-range-picker-->
        <!--                v-model="rangePicker"-->
        <!--                format="YYYY-MM-DD HH:mm"-->
        <!--                :showTime="{-->
        <!--                    format: 'HH:mm'-->
        <!--                }"-->
        <!--        ></lz-range-picker>-->
        <!--        <br/>-->
        <!--        <br/>-->
        <!--        <br/>-->
        <!--                <div style="width: 300px">-->
        <!--                    <lz-upload-->
        <!--                            v-model="uploadList"-->
        <!--                            :max-num="5"-->
        <!--                            :size="1"-->
        <!--                            @change="uploadChange"-->
        <!--                            accept=".jpg,.png,.xlsx"-->
        <!--                            :disabled="false"-->
        <!--                            imgBasePath="https://echftp.yqzhfw.com/"-->
        <!--                            action='http://localhost:8102/base/common/upload/image'-->
        <!--                    />-->
        <!--                    &lt;!&ndash;            https://ksource.yqzhfw.com/basis/api/base/v1/base/common/file/fileUpload&ndash;&gt;-->
        <!--                </div>-->
        <!--                <lz-tinymce-->
        <!--                        v-model="a"-->
        <!--                        @input="t"-->
        <!--                        height="200px"-->
        <!--                        skin="dark"-->
        <!--                        action="https://ksource.yqzhfw.com/basis/api/base/v1/base/common/file/fileUpload"-->
        <!--                        basePath="https://echftp.yqzhfw.com/"-->
        <!--                />-->
    </div>
</template>

<script>
    import items from './items'

    export default {
        name: 'App',
        components: {},
        data() {
            return {
                ms: [
                    {
                        "cateCode": "10000000",
                        "cateName": "宠物护理/食品",
                        "cateType": 1,
                        "createTime": "2020-09-08 09:31",
                        "id": "1303143567715205120",
                        "lv": 1,
                        "lv1Id": "1303143567715205120",
                        "lv1Name": "宠物护理/食品",
                        "lv2Id": "",
                        "lv2Name": "",
                        "lv3Id": "",
                        "lv3Name": "",
                        "lv4Id": "",
                        "lv4Name": "",
                        "pid": "0",
                        "seq": 0,
                        "state": 1,
                        "updateTime": "2020-09-08 09:37"
                    },
                    {
                        "cateCode": "47000000",
                        "cateName": "清洁/卫生产品",
                        "cateType": 1,
                        "createTime": "2020-09-08 09:31",
                        "id": "1303143567878782976",
                        "lv": 1,
                        "lv1Id": "1303143567878782976",
                        "lv1Name": "清洁/卫生产品",
                        "lv2Id": "",
                        "lv2Name": "",
                        "lv3Id": "",
                        "lv3Name": "",
                        "lv4Id": "",
                        "lv4Name": "",
                        "pid": "0",
                        "seq": 1,
                        "state": 1,
                        "updateTime": "2020-09-08 09:37"
                    },
                ],
                defaultFormData: {
                    ttt: '123123',
                },
                formData: Object.assign({}, this.defaultFormData),
                lztext: '中华人民共和国万岁',
                items: items,
                timePicker: '10:10:10',
                datePicker: '2020-10-10',
                rangePicker: ['', ''],
                uploadList: [
                    {
                        name: '音频服务.png',
                        path: '/basis/2020/7/10/13acde2b08e84fc7bae4e9c0195facfc.png'
                    }
                ],
                a: '',
                b: '',
                dataList: [
                    {
                        path: 'https://echftp.yqzhfw.com/basis/2020/7/10/13acde2b08e84fc7bae4e9c0195facfc.png'
                    }, {
                        path: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1595555863&di=170ed927a6ae5b36f478e5b222d05816&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                    },
                    {
                        path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595565947814&di=88ad5be9f62cf469215501c5abe970a0&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg'
                    }
                ],
                videoDataList: [
                    {
                        path: 'http://localhost:8081/11月17日ZW191013YZ001K刘强-情定瓦伦丁-S-情定瓦伦丁.mp4'
                    }, {
                        path: 'http://localhost:8081/20200118刘强&张海微.mp4'
                    },
                    {
                        path: 'http://localhost:8081/11月17日ZW191013YZ001K刘强-情定瓦伦丁-S-情定瓦伦丁.mp4'
                    }
                ],
                treeSelect: ["1303143567715205120", "1303143576716181504"],
                treeData: [
                    {
                        title: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                value: '0-0-1',
                                key: '0-0-1',
                                title: 'title',
                            },
                            {
                                title: 'Child Node2',
                                value: '0-0-2',
                                key: '0-0-2',
                            },
                        ],
                    },
                    {
                        title: 'Node2',
                        value: '0-1',
                        key: '0-1',
                    }
                ]
            }
        },
        beforeCreate() {

        },
        created() {
            setTimeout(() => {
                this.timePicker = ''
                this.datePicker = ''
                this.rangePicker = []
                this.uploadList = [
                    {
                        name: '音频服务.png',
                        path: '/basis/2020/7/10/13acde2b08e84fc7bae4e9c0195facfc.png'
                    },
                    {
                        name: '视频.png',
                        path: '/basis/2020/7/13/344671f59cb44dbda5e01df5e0fcfda5.png'
                    }
                ]
                this.lztext = '嘻嘻嘻嘻嘻嘻嘻'
            }, 3000)
        },
        mounted() {
            this.selectTreeInit();
            // this.treeInit();
            // this.tableInit();
        },
        methods: {
            lzTreeSelectChange(val) {
                console.log(val)
                console.log(this.treeSelect)
            },
            getSearchValues() {
                console.log(this.$refs.searchBar.getValues())
            },
            getSelect() {
                console.log(this.$refs.myTable.getSelected())
            },
            beforeUpload(file) {
                console.log(file)
            },
            doneUpload(file) {
                console.log(file)
            },
            textClick(val) {
                alert(val)
            },
            tableInit() {
                this.$refs.myTable.init({
                    url: 'http://localhost:7001/store/pc/store/purchase/order', // 请求url
                    method: 'get', // 请求方式（*）
                    pagination: true, // 是否显示分页（*）
                    queryParams: {}, // 默认参数
                    pageNumber: 1, // 初始化加载第一页，默认第一页
                    pageSize: 10, // 每页的记录行数（*）
                    pageList: [10, 25, 50, 100], // 可供选择的每页的行数（*）
                    showColumns: true, // 是否显示所有的列
                    showRefresh: true, // 是否显示刷新按钮
                    changeSize: true, // 允许改变列大小
                    showCheckBox: true, // 显示复选框
                    showIndex: true, // 显示序号
                    height: 500, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    columns: [
                        {
                            field: 'orderCode',
                            title: '进货单号',
                            width: 130,
                            sorter: 'true',
                            align: 'left'
                        },
                        {
                            field: 'supplierName',
                            title: '供应商',
                            width: 120,
                            align: 'left'
                        },
                        {
                            field: 'orderPrice',
                            title: '下单金额',
                            sorter: 'true',
                            width: 120,
                            align: 'right'
                        },
                        {
                            field: 'createrName',
                            title: '下单人',
                            width: 120,
                            align: 'left'
                        },
                        {
                            field: 'distributionTime',
                            title: '预计配送时间',
                            sorter: 'true',
                            width: 200,
                            align: 'center'
                        },
                        {
                            field: 'createTime',
                            title: '下单时间',
                            sorter: 'true',
                            width: 250,
                            align: 'center'
                        },
                        {
                            field: 'receiveState',
                            title: '状态',
                            sorter: 'true',
                            align: 'center',
                            width: 120,
                            formatter: {
                                type: 'badge',
                                format: row => {
                                    if (row.state === 0) {
                                        return {
                                            value: '待确认验收',
                                            color: 'gray' // 'primary','danger','success','warning','info'
                                        }
                                    } else if (row.state === 1) {
                                        return {
                                            value: '已收货',
                                            color: 'green'
                                        }
                                    }
                                }
                            }
                        }
                    ],
                    operate: {
                        items: [
                            {
                                label: '供货单',
                                color: 'primary',
                                event: row => {
                                    console.log(row)
                                }
                            },
                            {
                                label: '验货单',
                                color: 'primary',
                                event: row => {
                                    console.log(row)
                                }
                            },
                            {
                                label: '收货确认',
                                color: 'primary',
                                event: row => {
                                    console.log(row)

                                }
                            },
                            {
                                label: '编辑',
                                color: 'primary',
                                event: row => {
                                    console.log(row)

                                }
                            },
                            {
                                label: '删除',
                                color: 'danger',
                                event: row => {
                                    this.$confirm({
                                        title: '确认删除？',
                                        content: '删除后将无法恢复！',
                                        onOk: () => {
                                            console.log(row)

                                        }
                                    })
                                }
                            }
                        ]
                    }
                }, () => {
                    this.search()
                })
            },
            treeInit() {
                this.$refs.lzTree.init()
            },
            selectTreeInit() {
                // this.$refs.lzTreeSelect.init(this.treeData)


                this.$axios({
                    url: 'http://localhost:7001/center/pc/serve/goods/category/getTree',
                    params: {}
                }).then(res => {
                    this.$refs.lzTreeSelect.init(res.data)
                })


            },
            asyncLoad({id}) {
                return new Promise(resolve => {
                    this.$axios({
                        url: 'http://localhost:7001/center/pc/serve/goods/category/getTree',
                        params: {pid: id}
                    }).then(res => {
                        resolve(res.data)
                    })
                })
            },
            nodeClick(param) {
                console.log(param)
            },
            search(param) {
                console.log(param)
                this.$refs.myTable.search()
            },
            t() {
                console.log('a', this.a)
                console.log('b', this.b)
            },
            t1() {
                console.log('a', this.a)
                console.log('b', this.b)
            },
            uploadChange(fileList) {
                console.log(fileList)
                console.log(this.uploadList)
            },
            change(v) {
                console.log(v)
                console.log(this.timePicker)
            },
            msChange() {
                console.log(this.ms)
            },
            dateChange(v) {
                console.log(v)
                console.log(this.datePicker)
            }
        }
    }
</script>

<style>
    #app {
        padding: 0px 20px;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
